<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PDBe Molstar</title>

    <!-- Molstar CSS & JS -->
    <link rel="stylesheet" type="text/css" href="build/pdbe-molstar-light.css">
    <script type="text/javascript" src="build/pdbe-molstar-plugin.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 30px;
        }

        h2 {
            margin-bottom: 20px;
        }

        h3 {
            margin-bottom: 2px;
        }

        h4 {
            margin-top: 6px;
            margin-bottom: 2px;
        }

        h4:first-child {
            margin-top: 0px;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .controlsSection {
            width: 300px;
        }

        .controlBox {
            border: 1px solid lightgray;
            padding: 10px;
            margin-bottom: 20px;
        }

        .molstar-frozen #myViewer {
            position: relative;
            inset: 0px;
            width: 250px;
            height: 250px;
        }

        #myViewer {
            position: fixed;
            inset: 20px;
        }

        #myViewerCover {
            width: 250px;
            height: 250px;
            position: absolute;
            z-index: 1;
            /* background-color: rgba(255, 128, 128, .25); */
            display: none;
        }

        .molstar-frozen #myViewerCover {
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
        }

        .button {
            font-family: sans-serif;
            cursor: pointer;
            padding: 5px;
            text-decoration: underline dotted;
        }

        #myViewerCloseButton {
            position: fixed;
            top: 8px;
            right: 10px;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 150%;
            width: 1em;
            height: 1em;
            text-align: center;
            cursor: pointer;
        }

        .molstar-frozen #myViewerCloseButton {
            display: none;
        }

        #viewButtons {
            width: 250px;
            padding: 10px;
            align-content: center;
            justify-content: center;
            text-align: center;
            font-family: sans-serif;
        }

        button {
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 1px;
            padding-inline: 4px;
        }

        .molstar-frozen .msp-viewport-controls-buttons,
        .molstar-frozen .msp-viewport-controls-panel,
        .molstar-frozen .msp-viewport-top-left-controls {
            display: none;
        }

        button:last-child {
            margin-bottom: 0px;
        }
    </style>
</head>

<body>
    <h2>PDBe Molstar</h2>

    <div class="content">
        <div id="viewerSection" class="molstar-frozen">
            <h3>Static (image-like) plugin demo</h3>
            <div id="myViewerCover">
                <div id="openFullscreen" class="button" onclick="openFullscreen()">
                    Open 3D
                </div>
            </div>
            <!-- Molstar container -->
            <div id="myViewer"></div>
            <div id="myViewerCloseButton" onclick="closeFullscreen()">X</div>
            <div id="viewButtons">
                View:
                <span class="button" onclick="viewerInstance.visual.setViewDirection('front', { durationMs: 500 })">Front</span>
                <span class="button" onclick="viewerInstance.visual.setViewDirection('right', { durationMs: 500 })">Right</span>
                <span class="button" onclick="viewerInstance.visual.setViewDirection('top', { durationMs: 500 })">Top</span>
            </div>
        </div>

        <div class="controlsSection">
            <div>
                <h3>Options</h3>
                <div class="controlBox">
                    <pre id="options"></pre>
                </div>
            </div>
        </div>
    </div>


    <script>
        function getJsonParam(paramName) {
            const paramString = new URL(window.location).searchParams.get(paramName);
            const param = JSON.parse(paramString);
            return param ?? undefined;
        }

        function openFullscreen() {
            document.getElementById('viewerSection')?.classList.remove('molstar-frozen');
        }
        function closeFullscreen() {
            document.getElementById('viewerSection')?.classList.add('molstar-frozen');
            viewerInstance.visual.setViewDirection('front', { durationMs: 0 });
        }

        // Create plugin instance
        const viewerInstance = new PDBeMolstarPlugin();

        // Set default options (Checkout available options list in the documentation)
        const defaultOptions = {
            customData: {
                // url: 'http://127.0.0.1:1338/tmp/2e2n_updated.cif',
                url: 'https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v4.bcif',
                format: 'cif',
                binary: true,
            },
            alphafoldView: true,
            bgColor: 'white',
            hideControls: true,
            hideCanvasControls: ['expand', 'controlToggle'],
        };
        const options = { ...defaultOptions, ...getJsonParam('options') };

        const optionsDiv = document.getElementById('options');
        optionsDiv.innerHTML = JSON.stringify(options, undefined, 2).replace(/"(\w+)":/g, '$1:');

        // Get element from HTML/Template to place the viewer 
        const viewerContainer = document.getElementById('myViewer');

        // Call render method to display the 3D view
        viewerInstance.render(viewerContainer, options);

    </script>
</body>

</html>